import '@/app/styles/community.scss';
import { Target, Flame, Trophy, ListChecks } from 'lucide-react';
import { fetchTrackRecord } from '@/lib/api/community';
import TierBadge from '@/components/community/TierBadge';

type Props = {
	params: Promise<{ sid: string }>;
};

// 프로필 "예측 적중률" 탭 (익명 허용 · SSR) — 티어 배지·적중률·스트릭·표본수
export default async function UserProfileTrackRecordPage({ params }: Props)
{
	const { sid } = await params;
	const res = await fetchTrackRecord(sid);
	const record = res.success ? res.data : null;

	if (!res.success) {
		return <div className='track-leaderboard__error' role='alert'>예측 적중률을 불러오지 못했습니다.</div>;
	}

	if (!record || !record.hasRecord) {
		return <div className='user-profile__empty'>아직 채점된 예측이 없습니다.</div>;
	}

	return (
		<>
			<div className='track-summary'>
				<span className='track-summary__label'>등급</span>
				<TierBadge tierCode={record.tierCode} label={record.tier} />
			</div>

			<section className='user-profile__stats' aria-label='예측 적중률'>
				<div className='user-profile__stat'>
					<Target size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
					<div className='user-profile__stat-body'>
						<span className='user-profile__stat-label'>적중률</span>
						<span className='user-profile__stat-value'>{record.hitRate.toFixed(1)}%</span>
					</div>
				</div>

				<div className='user-profile__stat'>
					<ListChecks size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
					<div className='user-profile__stat-body'>
						<span className='user-profile__stat-label'>채점 예측 (적중/실패/무효)</span>
						<span className='user-profile__stat-value'>{record.hits} / {record.misses} / {record.voids}</span>
					</div>
				</div>

				<div className='user-profile__stat'>
					<Flame size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
					<div className='user-profile__stat-body'>
						<span className='user-profile__stat-label'>현재 연속 적중</span>
						<span className='user-profile__stat-value'>{record.currentStreak.toLocaleString()}</span>
					</div>
				</div>

				<div className='user-profile__stat'>
					<Trophy size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
					<div className='user-profile__stat-body'>
						<span className='user-profile__stat-label'>최고 연속 적중</span>
						<span className='user-profile__stat-value'>{record.bestStreak.toLocaleString()}</span>
					</div>
				</div>
			</section>
		</>
	);
}